<template>
    <div class="data-area">
        <el-table :border="false" :columns="columns" :data="dataList" @on-expand="onExpand" @on-selection-change="onSelectionChange" @on-row-dblclick="onRowDblclick" :row-class-name="rowClassName"></el-table>
        <div style="padding: 10px 5px">
            <el-page :current="current" :total="totalRow" size="small" show-total :styles="{'textAlign': 'right'}" @on-change="onPageChange"></el-page>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Object,
            default () {
                return {};
            }
        },
        columns: {
            type: Array,
            default () {
                return [];
            }
        },
        rowClassName: {
            type: Function,
            default () {
                return '';
            }
        }
    },
    watch: {
        data(newVal) {
            this.dataList = newVal.list;
            this.totalRow = newVal.totalRow;
            this.current = newVal.pageNumber;
        }
    },
    data() {
        return {
            dataList: [],
            totalRow: 0,
            current: 1
        }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
        onExpand(row, status) {
            this.$emit('on-expand', row, status);
        },
        onSelectionChange(selection) {
            this.$emit('on-selection-change', selection);
        },
        onRowDblclick(row, index) {
            this.$emit('on-row-dblclick', row, index);
        },
        onPageChange(page) {
            this.$emit('on-page-change', page);
        }
    }
}
</script>
<style scoped>

</style>
<style>

</style>